<template>
  <div class="user">
    <el-container>
      <el-aside width="170px">
        <el-menu
          router
          style="width:169px;height:100%;"
          default-active="2"
          class="el-menu-vertical-demo"
        >
          <el-menu-item
            v-for="(item, index) in leftData"
            :key="index"
            :index="actpath + '/' + item.menu_url"
          >
            <span slot="title">{{ item.title }}</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main><router-view></router-view></el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "User",
  data() {
    return {
      leftData: [],
      actpath: sessionStorage.getItem("actpath")
    };
  },
  mounted() {
    this.getNavInfo();
  },
  methods: {
    // 获取导航数据
    async getNavInfo() {
      let { data: res } = await this.$axios.navInfo();
      console.log(res);
      if (res.code != 200) {
        this.$message.error(res.msg);
      } else {
        this.leftData = res.rows[0].children;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.user {
  width: 100%;
  height: 100%;
  .el-container {
    width: 100%;
    height: 100%;
  }
}
.el-aside {
  color: #333;
  width: 170px;
}

.el-main {
  color: #333;
  padding: 0;
}
</style>
